<template>
  <a-config-provider :locale="locale" :get-popup-container="popContainer">
    <router-view v-if="isRouterAlice" />
  </a-config-provider>
</template>

<script>
  import { enquireScreen } from './utils/util'
  import zhCN from 'ant-design-vue/lib/locale-provider/zh_CN'
  import { mapState, mapMutations } from 'vuex'
  import themeUtil from '@/utils/themeUtil'

  export default {
    name: 'App',
    data() {
      return {
        locale: zhCN,
        isRouterAlice: true,
      }
    },
    provide() {
      return {
        reload: this.reload,
      }
    },
    created() {
      this.setHtmlTitle()
      enquireScreen((isMobile) => this.setDevice(isMobile))
    },
    mounted() {
      this.setWeekModeTheme(this.weekMode)
    },
    watch: {
      weekMode(val) {
        this.setWeekModeTheme(val)
      },
      $route() {
        this.setHtmlTitle()
      },
      'theme.mode': function (val) {
        let closeMessage = this.$message.loading(
          `您选择了主题模式 ${val}, 正在切换...`
        )
        themeUtil.changeThemeColor(this.theme.color, val).then(closeMessage)
      },
      'theme.color': function (val) {
        let closeMessage = this.$message.loading(
          `您选择了主题色 ${val}, 正在切换...`
        )
        themeUtil.changeThemeColor(val, this.theme.mode).then(closeMessage)
      },
      layout: function () {
        window.dispatchEvent(new Event('resize'))
      },
    },
    computed: {
      ...mapState('setting', ['layout', 'theme', 'weekMode']),
    },
    methods: {
      ...mapMutations('setting', ['setDevice']),
      setWeekModeTheme(weekMode) {
        if (weekMode) {
          document.body.classList.add('week-mode')
        } else {
          document.body.classList.remove('week-mode')
        }
      },
      setHtmlTitle() {
        const route = this.$route
        document.title =
          process.env.VUE_APP_NAME +
          ' | ' +
          (route.path === '/' ? '首页' : route.name)
      },
      popContainer() {
        return document.getElementById('popContainer')
      },
      /**重新加载页面 */
      reload() {
        this.isRouterAlice = false
        this.$nextTick(function () {
          this.isRouterAlice = true
        })
      },
    },
  }
</script>
